<template>
  <div>
    <HandVue :left="true" :iconbool="false" title="兑换订单" @back="fn"></HandVue>
    <!-- 兑换订单 -->
    <van-tabs v-model:active="active" background="#3ed2e2" title-inactive-color="white" title-active-color="white"
      class="vantabs" :sticky="true" offset-top="58" @click-tab="fun5">
      <van-tab title="待支付">
        <OrdertoreceiveVue :flag4="false" :flag3="false" @flag="true" @btnTix2="fun" Btntext1="取消订单" @btnTix="tixing1"
          Btntext="立即支付" @btnTix1="fun">
        </OrdertoreceiveVue>
      </van-tab>
      <van-tab title="待取货">
        <OrdertoreceiveVue :flag4="false" :flag1="false" @btnTix2="fun3" :Btnfalg="false" Btntext="二维码">
        </OrdertoreceiveVue>
      </van-tab>

      <van-tab title="配送中">
        <OrdertoreceiveVue :flag3="false" :flag1="false" :Btnfalg="false" Btntext="配送详情" @btnTix2="fun1"
          @btnTix1="fun4"></OrdertoreceiveVue>
      </van-tab>
      <van-tab title="已完成">
        <OrdertoreceiveVue :flag3="false" :flag1="false" @btnTix1="fun" @btnTix2="fun2" :Btnfalg="false"
          Btntext="再来一单"></OrdertoreceiveVue>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import OrdertoreceiveVue from "./Mycomponents/Ordertoreceive.vue";
import { useRouter, useRoute } from "vue-router";
import HandVue from "../../components/Hand.vue";
import { showConfirmDialog, showSuccessToast } from "vant";
import { ExchangeInfo } from "../../stores/ExchangeOrder";
import { getUnpaid } from "../../api/index";
import { useLoginStore } from '../../stores/login'

const stores2 = useLoginStore()
const stores1 = ExchangeInfo();

// 待支付
const fun5 = (a) => {
  if (a.title == "待支付") {
    getUnpaid(localStorage.token, "待支付").then((res) => {
      stores.data = res.data.data.data;

    });
  } else if (a.title == "待取货") {

    getUnpaid(localStorage.token, "待取货").then((res) => {
      stores.data = res.data.data.data;

    });
  } else if (a.title == "配送中") {
    getUnpaid(localStorage.token, "配送中").then((res) => {
      stores.data = res.data.data.data;

    });
  } else if (a.title == "已完成") {
    getUnpaid(localStorage.token, "已完成").then((res) => {
      stores.data = res.data.data.data;

    });
  }

};





const stores = ExchangeInfo();
const router = useRouter();
const route = useRoute();

const active = ref(0);

active.value = Number(route.query.num);

function fn() {
  router.back();
}

const fun = (index) => {
  router.push("/OrderList");

  stores1.itemData = stores.data[index]
};

const fun1 = (index) => {
  router.push("/Shipping");
  stores1.itemData = stores.data[index]
};

const fun2 = (index) => {
  router.push("/Completed");
  stores1.itemData = stores.data[index]
};
const fun3 = (index) => {
  router.push("/OrderSucess");
  stores1.itemData = stores.data[index]

};

const fun4 = (index) => {
  router.push("/Delivery");
  stores1.itemData = stores.data[index]
};
const tixing1 = () => {

  showConfirmDialog({
    title: "订单取消",
    confirmButtonText: "立即取消",
    cancelButtonText: "暂不取消",
    confirmButtonColor: "black",
    cancelButtonColor: "#f95474",
    message:
      "门店人员可能正忙，请确认是否取消订单或等待时间结束后自动取消订单。",
  })
    .then(() => {

      showSuccessToast("取消成功");
    })
    .catch(() => {

    });
};
</script>

<style lang="less" scoped>
van-tab {
  background-color: #eefdfa;
}
</style>
